import React, { useEffect } from 'react';

const CryptoTradeView = ({ title }) => {
  const tradeData = [
    { time: '2024-04-25T10:00:00Z', quantity: 100, type: 'buy' }, // 买入100个
    { time: '2024-04-25T12:00:00Z', quantity: 50, type: 'sell' }, // 卖出50个
    { time: '2024-04-25T14:00:00Z', quantity: 80, type: 'buy' }, // 买入80个
    // 更多交易数据...
  ];

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://s3.tradingview.com/tv.js';
    script.async = true;
    script.onload = () => {
      const tv = new window.TradingView.widget({
        "container_id": "tv_chart_container",
        "symbol": "BINANCE:BTCUSDT",
        "timezone": "Etc/UTC",
        "interval": "15",
        "locale": "zh",
        "theme": "dark",
        // "theme": "light",
        "autosize": true,
        "fullscreen": true,
        "allow_symbol_change": false,
      });
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [title]);

  return (
    <div id="tv_chart_container" className="strategy-chart"></div>
  );
};

export default CryptoTradeView;

